<script
    setup>
import {
    RouterLink,
    RouterView
} from 'vue-router'
</script>

<template>
    <div class="nav">
        <RouterLink
                to="/">
            Home
        </RouterLink>
        <RouterLink
                to="/about">
            About
        </RouterLink>
    </div>
    <div class="main">
        <RouterView/>
    </div>
</template>

<style
    scoped>
.nav{
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.nav a{
    font-size: 20px;
    color: red;
}
.main {
    width: 900px;
    height: 500px;
    background-color: skyblue;
}
</style>
